<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :title="`${$t('lend')}`"
    width="60%"
  >
    <el-form
      :inline="true"
      :model="formInline"

      label-width="120px"
    >
      <el-col :span="24">
        <el-form-item :label="`${$t('toolingBarcode')}`">
          <el-input
            v-model="formInline.user"
            clearable
            @keydown.enter.native="getInfo"
          />
        </el-form-item>
      </el-col>
      <div v-if="showForm">
        <el-form-item :label="`${$t('lendToId')}`">
          <el-select v-model="formInline.name" filterable clearable>
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('lendId')}`">
          <el-input v-model="formInline.user" clearable/>
        </el-form-item>
        <el-form-item label="借用备注">
          <el-input
            v-model="formInline.user"
            :rows="2"
            type="textarea"
          />
        </el-form-item>
      </div>
    </el-form>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mySetting from '@/mixins/mySetting'

export default {
  name: 'BorrowForm',
  components: {},
  mixins: [mySetting],
  props: {},
  data() {
    return {
      dialogVisible: false,
      formInline: {},
      showForm: false,
      tableData: [],
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: '', label: '备件编号' },
        { prop: '', label: '备件类型' },
        { prop: '', label: '库房位置' },
        { prop: '', label: '设备名称' },
        { prop: '', label: '工单号' },
        { prop: '', label: '客户代码' }
      ]
    }
  },
  methods: {
    getInfo() {
      this.showForm = true
    },
    handleOpen() {
      this.dialogVisible = true
      this.options.loading = false
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    ::v-deep .el-input__inner {
      width: 250px;
    }
  }
}
.el-textarea {
  width: 250px;
}
</style>
